<template>
  <a-form
    class="my-form"
    :model="formState"
    name="basic"
    ref="formRef"
    layout="vertical"
    autocomplete="off"
    @finish="onFinish"
    @finishFailed="onFinishFailed"
  >
    <a-form-item
      label="区域名称"
      name="areaName"
      :rules="[{ required: true, message: '请填写区域名称!' }]"
    >
      <a-input v-model:value="formState.areaName" />
    </a-form-item>

    <a-form-item
      label="车位数（个）"
      name="spaceNumber"
      :rules="[{ required: true, message: '请填写车位数!' }]"
    >
      <a-input v-model:value="formState.spaceNumber" />
    </a-form-item>

    <a-form-item
      label="面积（m²）"
      name="areaProportion"
      :rules="[{ required: true, message: '请填写面积!' }]"
    >
      <a-input v-model:value="formState.areaProportion" />
    </a-form-item>

    <a-form-item
      label="关联计费规则"
      name="ruleId"
      :rules="[{ required: true, message: '请选择关联计费规则!' }]"
    >
      <a-select
        ref="select"
        v-model:value="formState.ruleId"
        style="width: 100%"
        @change="handleChange"
      >
        <a-select-option v-for="item in optionList" :key="item.id" :value="item.id">{{
          item.ruleName
        }}</a-select-option>
      </a-select>
    </a-form-item>

    <a-form-item
      label="备注"
      name="remark"
      :rules="[{ required: true, message: '请填写备注信息!' }]"
    >
      <a-textarea :rows="4" v-model:value="formState.remark" />
    </a-form-item>

    <a-form-item class="btn-form-item">
      <a-button @click="cancel">取消</a-button>
      <a-button type="primary" html-type="submit">{{ isEdit ? '更新' : '确定' }}</a-button>
    </a-form-item>
  </a-form>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { getRuleListReqeust, addAreaReqeust, editAreaReqeust } from '@/apis/cart';

const emits = defineEmits(['ADD_SUCCESS']);
// currentItem在切换的时候，会发生变化，一般要结合watch， 深度监听去写
const props = defineProps<{
  isEdit: boolean;
  currentItem: any;
}>();
// const props = defineProps({
//   isEdit: {
//     type: Boolean,
//     required: true
//   }
// })

const formRef = ref<any>(null);

const formState = reactive<any>({
  areaName: '',
  spaceNumber: null,
  areaProportion: null,
  ruleId: null,
  remark: '',
});
const optionList = ref<any[]>([]);

const getAreaDropList = async () => {
  const res = await getRuleListReqeust({
    page: 1,
    pageSize: 1000,
  });
  console.log(res);
  optionList.value = res.data?.rows;
};

getAreaDropList();

if (props.isEdit) {
  // 如果是编辑，就要发请求，数据回显
  // 去看了接口文档，发现没有根据id，查询当前区域的详情接口，只能自己在想其他方法
  // 直接在父组件，将当前那一个对象，整体传递过来
  console.log(props.currentItem);

  formState.areaName = props.currentItem.areaName;
  formState.spaceNumber = props.currentItem.spaceNumber;
  formState.areaProportion = props.currentItem.areaProportion;
  formState.ruleId = props.currentItem.ruleId;
  formState.remark = props.currentItem.remark;
  formState.id = props.currentItem.id;
}

const handleChange = (e: any) => {
  console.log('下拉框的changge事件：', e);
};
const onFinish = async () => {
  // 如果表单校验成功，应该发请求，添加区域，然后关闭弹出框
  let res: any = null;
  if (props.isEdit) {
    res = await editAreaReqeust({
      id: formState.id,
      areaName: formState.areaName,
      spaceNumber: formState.spaceNumber,
      areaProportion: formState.areaProportion,
      ruleId: formState.ruleId,
      remark: formState.remark,
    });
  } else {
    res = await addAreaReqeust({
      areaName: formState.areaName,
      spaceNumber: formState.spaceNumber,
      areaProportion: formState.areaProportion,
      ruleId: formState.ruleId,
      remark: formState.remark,
    });
  }

  if (res.code === 10000) {
    // 通知父组件去关闭弹出框
    emits('ADD_SUCCESS');
    cancel();
  }
  // console.log('校验成功');
};
const onFinishFailed = () => {
  console.log('校验失败');
};

const cancel = () => {
  // 表单重置，是去form的官网，找api，找methods 就是方法相关的api，使用 ref调用
  formRef.value.resetFields();
};
</script>

<style lang="scss" scoped>
.my-form {
  .btn-form-item {
    position: absolute;
    height: 60px;
    bottom: 0;
    right: 0;
    left: 0;
    margin-bottom: 0;
    margin-top: 50px;
    :deep(.ant-form-item-control) {
      background-color: #cccccc33;
      text-align: right;
      line-height: 60px;
      padding-right: 15px;
      .ant-btn {
        border-radius: 6px;
        &:first-child {
          margin-right: 15px;
        }
      }
    }
  }
}
</style>
